@extends('admin.common.base-master')

@section('html-head')
    <link rel="stylesheet" href="{{url('css/admin/jquery.lineProgressbar.css')}}">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="{{url('js/jquery.lineProgressbar.js')}}" type="text/javascript"></script>
    <script src="{{url('js/echarts.min.js')}}" type="text/javascript"></script>
    <script src="{{url('js/jquery-ui-1.10.1.custom.min.js')}}" type="text/javascript"></script>
    <script src="{{url('js/amazeui.datetimepicker.min.js')}}" type="text/javascript"></script>
    <script src="{{url('js/jquery.ui.datepicker-zh-CN.js')}}" type="text/javascript"></script>
    <style>
        .tbody-trend td{
            padding: 0;
            height: 55px;
        }
    </style>
@endsection

@section('html-body')
    <!-- content start -->
    <div id="content">
        <!-- cur-position start -->
        <div id="cur-position">
            <span class="tit">当前位置：</span>
            <a href="#">数据统计</a>
        </div>
        <!-- cur-position end -->

        {{--<ul class="tab-nav clearfix">--}}
        {{--<li class="active"><a href="平台流水.html"><i class="icon tab-nav-4"></i>订单数据</a></li>--}}
        {{--<li><a href="粉丝数据.html"><i class="icon tab-nav-5"></i>粉丝数据</a></li>--}}
        {{--<li><a href="累计收入.html"><i class="icon tab-nav-6"></i>累计收入</a></li>--}}
        {{--</ul>--}}

        {{--<ul class="charts-menu clearfix">--}}
        {{--<li class="active"><a href="">今日：0 </a></li>--}}
        {{--<li class=""><a href="">昨日：0 </a></li>--}}
        {{--<li class=""><a href="">周：1 </a></li>--}}
        {{--<li class="all"><a href="javascript:void(0);">总计：15</a></li>--}}
        {{--</ul>--}}

        <h3 class="zb-head">会员数据指标</h3>
        <div class="table-box">
            <table class="table">
                <thead>
                <tr>
                    <th>今日新增会员</th>
                    <th>昨日新增会员</th>
                    <th>本月新增会员</th>
                    <th>总会员数</th>
                </tr>
                </thead>
                <tbody class="tbody-trend">
                <tr style="height: 55px">
                    <td class="first">
                        <span class="head">{{$today_vip_count}}</span>
                    </td>
                    <td>
                        <span class="head">{{$yesterday_vip_count}}</span>
                    </td>
                    <td>
                        <span class="head">{{$the_month_vip_count}}</span>
                    </td>
                    <td>
                        <span class="head" style="color: #108604">{{$all_vip_count}}</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <h3 class="zb-head">订单数据指标</h3>
        <div class="table-box">
            <table class="table">
                <thead>
                <tr>
                    <th>今日新增订单</th>
                    <th>今日收入</th>
                    <th>昨日新增订单</th>
                    <th>昨日收入</th>
                    <th>本月新增订单</th>
                    <th>本月收入</th>
                    <th>总订单</th>
                    <th>总收入</th>
                </tr>
                </thead>
                <tbody class="tbody-trend">
                <tr>
                    <td class="first">
                        <span class="head">{{$today_order_count}}</span>
                    </td>
                    <td class="first">
                        <span class="head">￥{{$today_order_sum}}</span>
                    </td>
                    <td>
                        <span class="head">{{$yesterday_order_count}}</span>
                    </td>
                    <td class="first">
                        <span class="head">￥{{$yesterday_order_sum}}</span>
                    </td>
                    <td>
                        <span class="head">{{$the_month_order_count}}</span>
                    </td>
                    <td class="first">
                        <span class="head">￥{{$the_month_order_sum}}</span>
                    </td>
                    <td>
                        <span class="head" style="color: #108604">{{$all_order_count}}</span>
                    </td>
                    <td class="first">
                        <span class="head" style="color: #108604">￥{{$all_amount_sum}}</span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        {{--性别比例--}}
        {{--<h3 class="zb-head">会员性别比例</h3>--}}
        {{--<div class="htmleaf-content" style="margin-top: 20px">--}}
            {{--<h3 class="center">未知性别</h3>--}}
            {{--<div id="progressbar1"></div>--}}
            {{--<h3 class="center">男</h3>--}}
            {{--<div id="progressbar2"></div>--}}
            {{--<h3 class="center">女</h3>--}}
            {{--<div id="progressbar3"></div>--}}
        {{--</div>--}}

        {{--<div class="filter-box mt20">--}}
            {{--<div id="chartsBox2" class="chartsBox" style="-webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);">--}}
            {{--</div>--}}
        {{--</div>--}}

        <div class="filter-box mt20">
            <span class="tab-time ml10">
                <span class="filter-tit">查询日期：</span>
                <input type="text" id="select_time" class="gg-time Wdate" name="st" placeholder="请选择时间" value="{{$select_time}}">
                <input type="button" id="timesBet" value="查询" class="inquiry-btn">
            </span>
            <div id="chartsBox" class="chartsBox" style="-webkit-tap-highlight-color: transparent; -webkit-user-select: none; cursor: default; background-color: rgba(0, 0, 0, 0);">
            </div>
        </div>
        <!-- content end -->
    </div>
    <script>
        $(function () {
            $('#progressbar1').LineProgressbar({
                percentage: "0"
            });
            $('#progressbar2').LineProgressbar({
                percentage: "30",
                fillBackgroundColor: '#1abc9c'
            });
            $('#progressbar3').LineProgressbar({
                percentage: "70",
                fillBackgroundColor: '#e67e22'
            });


            $('#timesBet').click(function () {
                var date = $('#select_time').val();
                window.location.href="{{route('Admin.Home.dataShow')}}?select_time="+date;
            });

            jQuery('#select_time').datepicker({
                dateFormat: "yy-mm-dd",
            });

            var myChart = echarts.init(document.getElementById('chartsBox'));

            var hoursData = [];
            @foreach($hour_nums as $hourNum)
                hoursData.push("{{$hourNum}}");
            @endforeach

            var selectTime = "{{$select_time}}";
            var title = '';
            function setTitle(selectTime) {
                if(selectTime == ''){
                    title = "今日订单量";
                }else {
                    title = selectTime+"订单量";
                }
            }
            setTitle(selectTime);

            option = {
                title: {
                    text: title
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data:['今日订单量']
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        name : '时',
                        type : 'category',
                        boundaryGap : false,
                        data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
                    }
                ],
                yAxis : [
                    {
                        name : '订单量',
                        type : 'value',
                    }
                ],
                series : [
                    {
                        name:'下单数量',
                        type:'line',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        lineStyle: {normal:{
                                color: '#12aebf'
                            }},
                        areaStyle: {normal: {
                                color: '#96bfbc'
                            }},
                        data:hoursData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            // var myChart2 = echarts.init(document.getElementById('chartsBox2'));

            {{--var oneHoursData = [];--}}
                    {{--@foreach($one_hour_nums as $one_hour_num)--}}
            {{--var d = ["{{$one_hour_num['time']}}","{{$one_hour_num['num']}}"];--}}
            {{--oneHoursData.push(d);--}}
            {{--@endforeach--}}

//                option2 = {
//                title: {
//                    text: "每小时访问量"
//                },
//                tooltip : {
//                    trigger: 'axis',
//                    axisPointer: {
//                        animation: false
//                    }
//                },
//                legend: {
//                    data:['访问量']
//                },
//                toolbox: {
//                    feature: {
//                        saveAsImage: {}
//                    }
//                },
//                grid: {
//                    left: '3%',
//                    right: '4%',
//                    bottom: '3%',
//                    containLabel: true
//                },
//                xAxis : [
//                    {
//                        name : '时',
//                        type : 'time',
//                        // boundaryGap : false,
//                        // data : ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']
//                    }
//                ],
//                yAxis : [
//                    {
//                        name : '访问次数',
//                        type : 'value'
//                    }
//                ],
//                series : [
//                    {
//                        name:'访问量',
//                        type:'line',
//                        stack: '总量',
//                        showSymbol: false,
//                        hoverAnimation: false,
//                        // label: {
//                        //     normal: {
//                        //         show: true,
//                        //         position: 'top'
//                        //     }
//                        // },
//                        // lineStyle: {normal:{
//                        //         color: '#12aebf'
//                        //     }},
//                        // areaStyle: {normal: {
//                        //         color: '#96bfbc'
//                        //     }},
//                        data:oneHoursData
//                    }
//                ]
//            };
            // 使用刚指定的配置项和数据显示图表。
            // myChart2.setOption(option2);

            // var nowTime = getFormatDate();
            // setInterval(function () {
            //     console.log(nowTime);
            //     getNewData(nowTime);
            //     nowTime = getFormatDate();
            // }, 5000);

            // myChart2.setOption({
            //     series: [{
            //         data: [["2019-08-06 07:00:00",50]]
            //     }]
            // });


            // function loadNewData(newData) {
            //     var a = [newData['time'],newData['num']];
            //     // for(var i=0;i<2;i++){
            //     oneHoursData.push(a);
            //     // }
            //
            //
            //     myChart2.setOption({
            //         series: [{
            //             data: oneHoursData
            //         }]
            //     });
            // }

            {{--function getNewData(time) {--}}
                {{--$.ajax({--}}
                    {{--url:"{{route('Api.Admin.Page.getNewData')}}",--}}
                    {{--type:"post",--}}
                    {{--dataType:'json',--}}
                    {{--data:{last_time:time},--}}
                    {{--success:function (obj) {--}}
                        {{--if(obj.level == 'success'){--}}
                            {{--loadNewData(obj.data);--}}
                        {{--}else {--}}
                            {{--console.log(obj);--}}
                        {{--}--}}
                    {{--},--}}
                    {{--error:function (obj) {--}}
                        {{--console.log(obj)--}}
                    {{--}--}}
                {{--});--}}
            {{--}--}}

            function getFormatDate(){
                var nowDate = new Date();
                var year = nowDate.getFullYear();
                var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
                var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
                var hour = nowDate.getHours()< 10 ? "0" + nowDate.getHours() : nowDate.getHours();
                var minute = nowDate.getMinutes()< 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
                var second = nowDate.getSeconds()< 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
                return year + "-" + month + "-" + date+" "+hour+":"+minute+":"+second;
            }
        });
    </script>
@endsection